<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="decorator/decorator">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>菜品显示</title>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->

<style type="text/css">
table.hovertable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.hovertable th {
	background-color:#c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
table.hovertable tr {
	background-color:#d4e3e5;
}
table.hovertable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
</style>
</head> 
<body>
   <div layout:fragment="content" th:remove="tag">

<!-- Table goes in the document BODY -->
<div align="center">
	<h5><span>您已经选择了餐桌编号为：</span><span th:text="${choosetable.tableId}"></span><span>，餐桌名称为：</span><span th:text="${choosetable.tableName}"></span><span>的餐桌，请继续点菜：</span></h5>
</div> 
<table width="80%" class="hovertable" align="center">
   <tr><td colspan="10" align="center"><h3>菜品显示</h3></td></tr>
   <tr>
		<td colspan="8" >
				<input type="button" value="根据菜系选择菜品" class="chooseFoodByFoodType"/>&nbsp;&nbsp;&nbsp;
				<form action="/userShowAllFood" method="post">
					<input type="hidden" name="tableId" th:value="${choosetable.tableId}"/>
					<input type="submit" value="查询全部菜品"/>
				</form>
		</td>
	</tr>
	<tr>
		<th>id</th>
		<th>菜系</th>
        <th>菜名</th>
        <th>描述</th>
        <th>价格</th>
        <th>会员价格</th>
        <th>菜品图片</th>
        <th>下单</th>
       
	</tr>
	
	<tr th:each="food:${foods}"  onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
		<td th:text="${food.foodId}"></td>
		<td th:text="${food.foodTypeVO.typeName}"></td>
        <td th:text="${food.foodName}"></td>
        <td th:text="${food.remark}"></td>
        <td th:text="${food.price}"></td>
        <td th:text="${food.mprice}"></td>
       <td>
        <img th:src="@{'/images/'+${food.img}+'.jpg'}"></img>
       </td>
        <td><input type="button" value="下单" class="edit-food" th:onclick="'addCarFood('+${food.foodId}+');'"/></td>     
	</tr>
</table>

<div class="modal fade" id="editFoodModal" tabindex="-1" role="dialog" aria-labelledby="editFoodModalLabel">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="true">
			         &times;
			       	</button>
			        <h4 class="modal-title" id="editFoodModalLabel">
			      		请选择您喜爱的菜系</h4>
			      </div>
			      <div class="modal-body">
			       	<form id = "editFoodForm" method="post" action="/searchFoodByFootType">
			       		<p><label>菜系：</label><select name="foodtypeId"></select></p>   
			       		<input type="hidden" name="tableId" th:value="${choosetable.tableId}"/>      					       	
			            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			            <button id="searchFoodBtn" type="submit" class="btn btn-primary">查询</button>
			         </form> 
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->


<script  th:src="@{js/jquery-1.11.1.min.js}" type="text/javascript"></script> 

<!-- Bootstrap -->
<script  th:src="@{js/bootstrap.min.js}"></script>
<script  th:src="@{js/jquery.validate.min.js}"></script>

<script>
	$(document).ready(function(){ 
	//显示单前菜品
	$('.chooseFoodByFoodType').click(function() {
		//查找所有菜系
		$.ajax({
			type:'POST',
			url:'/getFoodTypes',		
			dataType:"json",
			success:function(data){
				$('#editFoodForm select[name="foodtypeId"]').empty();
				$.each(data.foodTypeVO,function(index,item){		
						$('#editFoodForm select[name="foodtypeId"]').append('<option value="'+item.foodtypeId+'">'+item.typeName+'</option>');
				});										
			} 
			
		}); 
		
		$('#editFoodModal').modal('show');	
	}); 	
}); 	
	
	
	
	//增加菜品到购物车
	function addCarFood(foodId) {
		if(confirm('是否点此菜')){
			$.ajax({
				type:"POST",
				url:"/addCarFood",
				//contentType : "application/json",
				data:{
					foodId:foodId
					},
				dataType:"json",
				success:function(data){
					
					alert('添加成功');
					
					location.href = "/showMycart";
				
				}
			});				
		}
	}
</script>


</div>
</body>
</html>